﻿@{
    Layout = null;
}

<script src="~/Scripts/js/UserProfile_koViewModel.js"></script>
<script src="~/Scripts/js/UserProfile_koBindingScript.js"></script>
<script type='text/javascript'>
    $(".modal").draggable({
        handle: ".modal-header"
    });

</script>

<script type="text/javascript">
    $(document).ready(function () {
        //self.GetPasswordQuestions
        $("#registerForm").validate({
            rules: {
                txtUserName: "required",
                Password: {
                    required: true,
                    minlength: 8
                },
                ConfirmPassword: {
                    required: true,
                    equalTo: "#Password"
                },
                Email: {
                    required: true,
                    email: true
                },

                title: "required",
                FirstName: "required",
                LastName: "required",
                Address: "required",
                City: "required",
                Region: "required",
                PostalCode: "required",

                OfficePhone: {
                    required: true,
                    number: true
                },
                CellPhone: {
                    required: true,
                    number: true
                },
                PasswordQuestion: "required",
                PasswordAnswer: "required"
            },
            messages: {
                txtUserName: "Enter your User name",

                Password: {
                    required: "Enter your password",
                    minlength: "Password must be minimum 8 character"
                },
                ConfirmPassword: {
                    required: "Enter confirm password",
                    equalTo: "Password and Confirm Password must match"
                },
                Email: {
                    required: "Enter your email address",
                    email: "Enter valid email addresss"
                },
                title: "Select title",
                FirstName: "First name required ",
                LastName: "Last name required ",
                Address: "Address required ",
                City: "City required",
                Region: "Region required",
                PostalCode: "PostalCode required",
                OfficePhone: {
                    required: "Enter Phone",
                    number: "should be number"
                },
                CellPhone: {
                    required: "Enter cell Phone",
                    number: "should be number"
                },
                PasswordQuestion: "required Question",
                PasswordAnswer: "required Answer"
            },
            errorClass: "help-inline",
            errorElement: "span",
            highlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }
        });
       
    });
   
</script>



<section id="breadcrumb-hang">
    <ul class="breadcrumb">
        <li class="first"><a href="./" style="z-index: 9;"><span></span>Home</a></li>
        <li><a href="#" style="z-index: 8;" class="current">Users</a></li>
    </ul>
</section>
<div id="register-error" class="alert alert-danger" style="display: none;">
    <button class="close"  type="button" onclick="$('.alert').hide()">×</button>
    <i class="icon-white icon-warning-sign"></i><strong>Error</strong>
    <a id="error-dis"></a>
</div>



<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <td colspan="7" class="filter-head">
                <button href="#myModaladd2" data-toggle="modal" data-bind="click: $root.AddUser" class="add-btn btn pull-left "><i class="icon-edit"></i>Add</button>
                <input type="text" class="SearchFilter" placeholder="Search here" data-bind='value: filter, valueUpdate: "afterkeydown"' />
                <div data-bind="visible: filteredUser().length == 0">
                    No Results
                </div>               
            </td>
        </tr>
        <tr>           
            <th data-bind="sort: { arr: sortRecords, prop: 'UserName' }">User Name</th>
            <th data-bind="sort: { arr: sortRecords, prop: 'FullName' }">Name</th>
            <th data-bind="sort: { arr: sortRecords, prop: 'IsActive' }">Active / Deactive</th>
            <th>Created By</th>
            <th>Modified By</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody class="SearchContent" data-bind="foreach: filteredUser">

        <tr>
            <td > <span class="bluet1"  data-bind="bootstrapPopover : {content : UserId +'<span class=\'bluet1\'>ID :</span><br>  '+ CreatedBy +'<span class=\'bluet1\'>Created by:</span><br>'+ CreatedDt+'<span class=\'bluet1\'>Created Date:</span><br>   '+ModifiedBy +' <span class=\'bluet1\'>:Modified by</span><br>  '+ ModifiedDt +' <span class=\'bluet1\'>Modified Date:</span><br>  '+  UserName  +' <span class=\'bluet1\'>User Name:</span><br>  ' ,html:true  }"><span data-bind="text: UserName"></span></span></td>
            <td><span data-bind="text: FirstName"></span> <span data-bind="    text: LastName"></span></td>
            <td><i data-bind=" css: { 'icon-eye-close': IsActive == false, 'icon-eye-open': IsActive == true }"></i></td>
            <td data-bind="text: CreatedBy"></td>
            <td data-bind="text: ModifiedBy"></td>
            
            <td>
             
                <button href="#myModaldelete" data-toggle="modal" class="cancel-btn btn " data-bind="click:$root.LoadUserprofile"><i class="icon-white icon-trash"></i>Delete</button>
                <button href="#myModaledit" data-toggle="modal" class="submit-btn btn " data-bind="click: $parent.EditUser"><i class="icon-white icon-edit"></i>Edit</button>
            </td>
        </tr>

    </tbody>
</table>


@* edit user *@

<section id="editmodel" data-bind="modal: EditingUser" class="fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Edit User</h3>
    </div>
    <div class="modal-body">
        <form class="editform" id="tab">
            <label>User Name</label>
            <input type="text" disabled="disabled" data-bind="value: UserName" name="txtUserName" class="input-xlarge">
            @*<label for="Email">Email Address</label>
            <input type="email" id="Email" name="Email" class="required" data-bind="value: Email" class="input-xlarge" />*@
            <label>First Name</label>
            <input type="text" data-bind="value: FirstName" name="txtFirstName" class="input-xlarge">
            <label>Last Name</label>
            <input type="text" data-bind="value: LastName" name="txtLastName" class="input-xlarge">
            <label>Address</label>
            <input type="text" data-bind="value: Address" name="txtAddress" class="input-xlarge">
            <label>City</label>
            <input type="text" data-bind="value: City" name="txtCity" class="input-xlarge">
            <label>Region</label>
            <input type="text" data-bind="value: Region" name="txtRegion" class="input-xlarge">
            <label>Postal Code</label>
            <input type="text" data-bind="value: PostalCode" name="txtPostalCode" class="input-xlarge">
            <label>Office Phone</label>
            <input type="text" data-bind="value: OfficePhone" name="txtOfficePhone" class="input-xlarge">
            <label>CellPhone</label>
            <input type="text" data-bind="value: CellPhone" name="txtCellPhone" class="input-xlarge">

            <label>Title</label>
            <input type="text" data-bind="value: Title" name="txtTitle" class="input-xlarge">
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button data-bind="click:$root.UpdateUserprofile" class="btn btn-info">Update</button>
    </div>
</section>

@* popup add data *@

<section id="myModaladd2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Add User</h3>
    </div>
    <div class="modal-body">

        <div id="addApplicationNode">
            <form id="registerForm" class="addform">
                <fieldset>

                    <label>User Name</label>
                    <input type="text" data-bind="value: UserName" name="txtUserName" class="input-xlarge">
                    <label>PassWord</label>
                    <input type="password" id="Password" name="Password" data-bind="value: Password" name="txtFirstName" class="input-xlarge">
                    <label>Confirm PassWord</label>
                    <input type="password" id="ConfirmPassword" name="ConfirmPassword" data-bind="value: ConfirmPassword" name="txtFirstName" class="input-xlarge">
                    <label for="Email">Email Address</label>
                    <input type="email" id="Email" name="Email" class="required" data-bind="value: Email" class="input-xlarge" />
                    <label>First Name</label>
                    <input type="text" data-bind="value: FirstName" id="FirstName" name="FirstName" class="input-xlarge">
                    <label>Last Name</label>
                    <input type="text" data-bind="value: LastName" id="LastName" name="LastName" class="input-xlarge">
                    <label>Address</label>
                    <input type="text" data-bind="value: Address" name="txtAddress" class="input-xlarge">
                    <label>City</label>
                    <input type="text" data-bind="value: City" name="txtCity" class="input-xlarge">
                    <label>Region</label>
                    <input type="text" data-bind="value: Region" name="txtRegion" class="input-xlarge">
                    <label>Postal Code</label>
                    <input type="text" data-bind="value: PostalCode" name="txtPostalCode" class="input-xlarge">
                    <label>Office Phone</label>
                    <input type="text" data-bind="value: OfficePhone" name="txtOfficePhone" class="input-xlarge">
                    <label>CellPhone</label>
                    <input type="text" data-bind="value: CellPhone" name="txtCellPhone" class="input-xlarge">
                    <label>Password Question</label>
                    @* <select  data-bind="options: $root.passQS,optionsText: 'PasswordQuestionDesc' ,value: selectedVal,optionsCaption : 'Choose Question'"></select>            *@
                    <select data-bind="options: $root.auserid, optionsText: 'PasswordQuestionDesc', value: selectedVal,optionsCaption : 'Choose User'"></select>
                    <label>Password Answer</label>
                    <input type="text" data-bind="value: PasswordAnswer" id="PasswordAnswer" name="PasswordAnswer" class="input-xlarge">
                    <label>Title</label>
                    <select data-bind="value: Title" name="txtTitle">
                        <option>Mr</option>
                        <option>Mrs</option>
                    </select>
                    <p>
                    </p>
                </fieldset>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button data-bind="click: $root.AddUserProfile" class="submit-btn btn "><i class="icon-white icon-edit"></i>Add</button>
    </div>
</section>

@* popup delete *@

<section data-bind="modal: LoadingUserprofile" id="myModel" class="fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Delete Record</h3>
    </div>
    <div class="modal-body">
        <p>Delete this record ?</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-bind="click:$root.DeleteUserprofile">Yes</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">No</button>
    </div>
</section>


